<!--
 * 瀑布流组件
-->
<template>
    <page-layout class="page-layout">
        <view class="options">
            <view class="row">
                <view class="row-label"> 切换列数： </view>
                <view class="row-content">
                    <view class="row-option" v-for="option in colsOptions" :key="option" :class="{ active: option === cols }" @click="cols = option"> {{ option }}列 </view>
                </view>
            </view>
            <view class="row">
                <view class="row-label"> 切换间隔： </view>
                <view class="row-content">
                    <view class="row-option" v-for="option in gapOptions" :key="option" :class="{ active: option === gap }" @click="gap = option"> {{ option }} </view>
                </view>
            </view>
        </view>
        <view class="header">
            <pure-button theme="primary" text="向顶部加载数据" block @tap="loadShiftData"></pure-button>
        </view>
        <pure-waterfall :cols="cols" :gap="gap">
            <pure-waterfall-item v-for="(item, index) in list" :key="index" :index="index" :data="item" :loaded="item.loaded">
                <view class="item">
                    <image class="item-image" :src="item.image" mode="widthFix" @load="item.loaded = true" />
                    <view class="item-content">
                        <view class="item-title">{{ item.title }}</view>
                        <view class="item-text">{{ item.content }}</view>
                    </view>
                    <view class="item-delete" hover-class="pure-hover" @tap.stop="handleDelete(index)">
                        <pure-icon name="__lajitong2"></pure-icon>
                    </view>
                </view>
            </pure-waterfall-item>
        </pure-waterfall>

        <view class="footer">
            <pure-button theme="primary" text="加载更多数据" block @tap="loadData"></pure-button>
            <pure-button theme="success" text="向随机位置插入数据" block @tap="loadRandomData"></pure-button>
        </view>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
    import { onReady } from "@dcloudio/uni-app";

    // 列数
    const cols = ref(2);
    const colsOptions = ref([2, 3]);

    // 间隔
    const gap = ref("10px");
    const gapOptions = ref(["5px", "10px", "20px"]);

    // 数据列表
    const list = ref([]);

    // 加载数据
    onReady(() => {
        loadData();
    });

    // 加载数据
    function loadData() {
        const data = [];
        for (let i = 3; i <= 20; i++) {
            const item = {
                id: list.value.length + i,
                title: `标题${list.value.length + i}`,
                content: `内容${list.value.length + i}`,
                image: `/static/${i}.png`,
                loaded: false,
            };
            data.push(item);
        }
        list.value = list.value.concat(data);
    }

    // 加载数据
    function loadShiftData() {
        // 获取 3-20 之间的随机整数
        const idx = Math.floor(Math.random() * (20 - 3 + 1)) + 3;
        list.value.unshift({
            id: list.value.length + 1,
            title: `标题${list.value.length + 1}`,
            content: `内容${list.value.length + 1}`,
            image: `/static/${idx}.png`,
            loaded: false,
        });
    }

    // 加载数据
    function loadRandomData() {
        // 获取 3-20 之间的随机整数
        const idx = Math.floor(Math.random() * (20 - 3 + 1)) + 3;
        // 获取 0 - 列表长度之间的随机整数
        const num = Math.floor(Math.random() * (list.value.length + 1));
        list.value.splice(num, 0, {
            id: list.value.length + 1,
            title: `标题${list.value.length + 1}`,
            content: `内容${list.value.length + 1}`,
            image: `/static/${idx}.png`,
            loaded: false,
        });
    }

    // 删除
    function handleDelete(index) {
        list.value.splice(index, 1);
    }
</script>

<style scoped lang="scss">
    .options {
        margin-bottom: 10px;
    }

    .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 15px;
        background: #f8f8f8;
        border-radius: 8px;

        &-label {
            font-weight: 700;
        }

        &-content {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
        }

        &-option {
            font-size: 12px;
            padding: 6px 12px;
            background: var(--pure-theme-info);
            color: #ffffff;
            border-radius: 8px;
            line-height: 1;
            font-weight: bold;

            &.active {
                background: var(--pure-theme-primary);
            }
        }
    }

    .item {
        background: #f8f8f8;
        border-radius: 8px;
        overflow: hidden;
        position: relative;

        &-image {
            width: 100%;
            display: block;
        }

        &-content {
            padding: 10px;
            text-align: center;
        }

        &-title {
            font-weight: 700;
            font-size: 15px;
        }

        &-text {
            font-size: 12px;
        }

        &-delete {
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 2;
            background: var(--pure-theme-danger);
            width: 26px;
            height: 26px;
            font-size: 12px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            line-height: 1;
        }
    }

    .header,
    .footer {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .header {
        margin-bottom: 10px;
    }
</style>
